<!--
 (c) Copyright Ascensio System SIA 2020

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Get and paste html</title>
	<script type="text/javascript" src="vendor/onlyoffice/sdkjs-plugins_v1_plugins.js"></script>
	<script type="text/javascript" src="vendor/onlyoffice/sdkjs-plugins_v1_plugins-ui.js"></script>
	<link rel="stylesheet" href="vendor/onlyoffice/sdkjs-plugins_v1_plugins.css">
	<script src="vendor/prettier/standalone@2.3.2.js"></script>
	<script src="vendor/prettier/parser-html@2.3.2.js"></script>
	<script src="vendor/codemirror/codemirror.js"></script>
	<script src="vendor/codemirror/xml.js"></script>
	<script src="vendor/elementplus/vue@3.3.4.js"></script>
	<script src="vendor/elementplus/element-plus@2.3.14.js"></script>
	<link rel="stylesheet" href="vendor/codemirror/codemirror.css">
	<link rel="stylesheet" href="vendor/codemirror/bespin.css">
	<link rel="stylesheet" href="vendor/elementplus/element-plus@2.3.14.css">

	<style>
		html,
		body {
			width: 100%;
			height: 100%;
		}

		.flexBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 0;
			font-size: 12px;
		}

		.flexBox.flexStart {
			justify-content: flex-start;
		}

		.infinite-list {
			height: 200px;
			padding: 5px 0;
			margin: 0;
			list-style: none;
			border-top: 1px solid #dbdbdb;
			border-bottom: 1px solid #dbdbdb;
		}

		.infinite-list .infinite-list-item {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 5px;
		}

		.infinite-list .infinite-list-item:hover {
			color: var(--el-color-primary);
			background: var(--el-color-primary-light-9);
		}

		.infinite-list .infinite-list-item.active {
			color: var(--el-color-primary);
			background: var(--el-color-primary-light-8);
		}

		.infinite-list .infinite-list-item+.list-item {
			margin-top: 10px;
		}

		.el-dialog__header .el-dialog__title {
			font-size: 14px;
		}

		.title {
			font-size: 12px;
			line-height: 1.5;
			padding: 5px 0;
			font-weight: bold;
			color: black;
		}
	</style>
</head>

<body id="body" style="max-height: calc(100% - 105px); max-width: calc(100% - 20px); overflow-y: auto;">
	<div id="app">
	    <!--
		<el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="内容域操作" name="first">
				<div class="flexBox">
					<div class="title">新建内容域</div>
					<el-space>
						<el-button size="small" @click="handleOpen(2)">纯文本</el-button>
						<el-button size="small" @click="handleOpen(1)">富文本</el-button>
					</el-space>
				</div>
				<ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
					<li v-for="(item, index) in contentList" :key="index" class="infinite-list-item"
						:class="item.InternalId == selectedCountControl.InternalId ? 'active' : ''"
						@click="handleSelect(item)">{{ item.Alias }}
					</li>
				</ul>

				<div class="flexBox flexStart">
					<el-button type="primary" size="small" :disabled="selectedCountControl.InternalId === ''"
						@click="handleInsert">插入内容</el-button>
					<el-button type="primary" size="small" :disabled="selectedCountControl.InternalId === ''"
						@click="handleGetContent">提取内容</el-button>
					<el-button type="primary" size="small" :disabled="selectedCountControl.InternalId === ''"
						@click="handleDelete">删除</el-button>
				</div>
				<div>
					<div class="title">内容域外观</div>
					<div class="flexBox flexStart">
						<el-form-item label="显示" style="margin-right: 20px; margin-bottom: 0;">
							<el-select v-model="hasBorder" class="m-2" placeholder="" size="small" style="width: 60px;"
								:disabled="selectedCountControl.InternalId === ''">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>
						<el-form-item label="边框颜色" style="margin-right: 20px; margin-bottom: 0;">
							<el-color-picker v-model="borderColor" size="small" popper-class="colorBox"
								:disabled="selectedCountControl.InternalId === ''" />
						</el-form-item>
					</div>
				</div>
				<div>
					<div class="title">内容域内容保护</div>
					<div>
						<el-checkbox-group v-model="checkList" @click="handleCheckListChange"
							:disabled="selectedCountControl.InternalId === ''">
							<el-checkbox :label="1" size="small">不可删除</el-checkbox>
							<el-checkbox :label="2" size="small">只读</el-checkbox>
						</el-checkbox-group>
					</div>
				</div>
				<div style="border-top: 1px solid #dbdbdb; padding-top: 15px; margin-top: 15px;">
					<div class="title">协作者权限配置</div>
					<div>
						<el-radio-group v-model="radioVal" @click="handleRadioChange">
							<el-radio :label="1">隐藏</el-radio>
							<el-radio :label="2">只读</el-radio>
							<el-radio :label="3">编辑</el-radio>
						</el-radio-group>
					</div>
					<div style="display:flex; justify-content: center; margin: 10px 0;">
						<el-button type="primary" size="small">应用</el-button>
					</div>
				</div>-->
				<!--
			</el-tab-pane>
			
			<el-tab-pane label="其他" name="second">

				<input id="searchValue" rows="1" style="width: 100%;" placeholder="请输入"></input>
				<div style="display: flex; justify-content: flex-start; margin: 10px 0;">
					<button id="searchText" class="btn-text-default">搜索</button>
				</div>
				<textarea id="insertValue" rows="6" style="width: 100%;" placeholder="请输入"></textarea>
				<div style="display: flex; justify-content: space-between; margin: 10px 0;">
					<button id="insertText" class="btn-text-default">在光标处插入内容</button>
					<button id="insertHtml" class="btn-text-default">在光标处插入html</button>
				</div>

				<textarea id="showSelectedText" rows="6" style="width: 100%;" placeholder="选中的文本"></textarea>
				<div style="display:flex; justify-content: flex-start; margin: 10px 0;">
					<button id="selectText" class="btn-text-default">获取选中的文本</button>
				</div>

				<textarea id="showCommon" rows="6" style="width: 100%;" placeholder="提取批注"></textarea>
				<div style="display:flex; justify-content: space-between; margin: 10px 0;">
					<button id="insertCommont" class="btn-text-default">在光标处插入批注</button>
					<button id="getCommonts" class="btn-text-default">提取所有批注</button>
					<button id="removeCommonts" class="btn-text-default">移除所有批注</button>
				</div>

				<textarea id="showJson" rows="6" style="width: 100%;" placeholder="json文本"></textarea>
				<div style="display:flex; justify-content: space-between; margin: 10px 0;">
					<button id="insertJson" class="btn-text-default">JSON回填</button>
					<button id="getJson" class="btn-text-default">提取JSON串</button>
				</div>

				 <div style="display:flex; justify-content: center; margin-bottom:10px;">
					<button id="changeContent" class="btn-text-default">修改控件</button>
					<button id="postMessage" class="btn-text-default">返回参数</button>
				</div> 

			</el-tab-pane>
		</el-tabs>-->
		<!-- 
		<el-dialog v-model="dialogVisible" title="内容域设置" width="90%" :before-close="handleClose">
			<el-form :model="form" label-width="60px" size="small" ref="formRef">
				<el-form-item label="ID" prop="Id">
					<el-input v-model="form.Id" :disabled="true" />
				</el-form-item>
				<el-form-item label="标题" prop="Alias">
					<el-input v-model="form.Alias" />
				</el-form-item>
				<el-form-item label="唯一标识" prop="InternalId">
					<el-input v-model="form.InternalId" disabled="true" />
				</el-form-item> 
				<el-form-item label="显示边框" prop="Appearance">
					<el-select v-model="form.Appearance" class="m-2" placeholder="显示边框">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="边框颜色" prop="Color">
					<el-color-picker v-model="form.Color" color-format="rgb" />
				</el-form-item>
				<el-form-item label="内容保护" prop="Access">
					<el-checkbox-group v-model="form.Access">
						<el-checkbox name="Access" :label="1">不可删除</el-checkbox>
						<el-checkbox name="Access" :label="2">只读</el-checkbox>
					</el-checkbox-group>

				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleClose" size="small">取消</el-button>
					<el-button type="primary" @click="onSubmit" size="small">
						确定
					</el-button>
				</span>
			</template>
		</el-dialog>-->
	</div>
</body>
<script src="scripts/code.js"></script>

</html>